<template>
  <div class="field">
    <div class="field_wrap">
      <label v-if="label">{{label}}</label>
      <slot />
      <div class="field_ipt">
        <input class="field_val"
               ref="ipt"
               :class="{'is_val':iptValue}"
               :type="type"
               :disabled="disabled"
               :maxlength="type==='tel'? 13:maxLength"
               :placeholder="disabled?'':placeholder"
               v-model="iptValue"
               @focus="handleFocus"
               @blur="handleBlur"
               @input="handleInput"
               @keyup.enter="handleSubmit">
      </div>
      <div class="svg_wrap close"
           v-show="showClear"
           @click="clearVal">
        <svg-icon name="close_m"
                  color="rgba(0, 0, 0, 0.2)"></svg-icon>
      </div>
      <div class="svg_wrap warn"
           v-show="showWarn">
        <svg-icon name="warn_m"
                  color="rgba(255, 129, 129, 1)"></svg-icon>
      </div>
      <slot name="right"></slot>
    </div>
  </div>

</template>

<script>
export default {
  name: 'CIpt',
  props: {
    // 输入框类型
    type: {
      type: String,
      default: 'text'
    },
    // 提示文字
    label: {
      type: String
    },
    desc: {
      type: String
    },
    value: {
      type: [String, Number],
      required: true
    },
    // 是否必填
    required: {
      type: Boolean,
      default: false
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 最大长度
    maxLength: {
      type: String
    },
    // 最大长度
    max: {
      type: Number
    },
    // 最大长度
    min: {
      type: Number
    },
    // 检测
    isType: {
      type: Function,
      default: null
    },
    placeholder: {
      type: String
    }
  },
  data () {
    return {
      iptValue: '',
      isActive: false,
      showWarn: false,
      timer: null
    }
  },
  computed: {
    showClear () {
      if (this.iptValue !== '' && this.isActive) {
        return true
      }
      return false
    }
  },
  watch: {
    value: {
      handler (val) {
        this.iptValue = val
      },
      immediate: true
    },
    iptValue (val, oVal) {
      let value = val + ''
      if (this.type === 'tel') {
        this.iptValue = value.length > oVal.length ? value.replace(/\s/g, '').replace(/(\d{3})(\d{0,4})(\d{0,4})/, '$1 $2 $3') : value.trim()
        this.$emit('input', value)
      } else {
        this.$emit('input', value.trim())
      }
      if (value.trim() === '') {
        this.iptValue = ''
      }
    }
  },
  methods: {
    isIOS () {
      var isIphone = ~navigator.userAgent.indexOf('iPhone')
      var isIpad = ~navigator.userAgent.indexOf('iPad')
      return isIphone || isIpad
    },
    clearVal () {
      this.iptValue = ''
      this.$refs.ipt.focus()
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
      this.isActive = true
    },
    handleSubmit () {
      this.$emit('enter')
    },
    handleFocus () {
      this.isActive = true
    },
    handleBlur () {
      this.timer = setTimeout(() => {
        this.isActive = false
      }, 500)
      let iptValue = this.iptValue + ''
      if (iptValue.trim() === '') {
        this.showWarn = !!this.required
      } else {
        this.showWarn = this.isType && !this.isType(this.iptValue.replace(/\s/g, ''))
      }
      if (this.isIOS()) {
        this.handleIosScroll()
      }
    },
    handleIosScroll () {
      let currentPosition, timer
      let speed = 1// 页面滚动距离
      timer = setInterval(function () {
        currentPosition = document.documentElement.scrollTop || document.body.scrollTop
        currentPosition -= speed
        window.scrollTo(0, currentPosition)// 页面向上滚动
        currentPosition += speed // speed变量
        window.scrollTo(0, currentPosition)// 页面向下滚动
        clearInterval(timer)
      }, 1)
    },
    handleInput () {
      if (this.isInt && /[^\d]/.test(this.iptValue)) {
        this.iptValue = this.iptValue.replace(/[^\d]/g, '')
      }
      let iptValue = this.iptValue + ''
      // if (this.iptValue.trim() === '') {
      if (iptValue.trim() === '') {
        return
      }
      // 特殊符号
      let reg = /([^\u4e00-\u9fa5\w])/g
      if (reg.test(this.iptValue)) {
        let available = [' ', '@', '.', '-']
        this.iptValue = this.iptValue.replace(reg, (s1) => {
          if (~available.indexOf(s1)) return s1
          return ''
        })
      }
      // 数字与手机号
      let regTel = /(\D)/g
      if ((this.type === 'tel' || this.type === 'number') &&
        regTel.test(this.iptValue)) {
        let available = [' ']
        this.iptValue = this.iptValue.replace(regTel, (s1) => {
          if (~available.indexOf(s1)) return s1
          return ''
        })
      }
      // 字符长度
      if (this.maxLength && this.iptValue.length > this.maxLength) {
        this.iptValue = this.iptValue.substr(0, this.maxLength)
      }
      if (this.iptValue > this.max) {
        this.iptValue = this.max
      }
      if (this.iptValue < this.min) {
        this.iptValue = this.min
      }
      this.showWarn = this.isType && !this.isType(this.iptValue.replace(/\s/g, ''))
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.field
  position relative
  margin-bottom 15px
  font-size 16px
  .field_wrap
    flexAlign()
    padding 10px 15px
    border 1PX solid $color-bd
    border-radius 4px
    background-color $color-ipt-bg
    label
      display block
      color $color-font-l
      font-size 16px
      line-height 22px
  .field_ipt
    position relative
    flex 1
    width 0
    line-height 22px
    // input
    // line-height 1
    input:disabled
      color $color-font-hl
      opacity 1
      // -webkit-text-fill-color $color-font
      -webkit-opacity 1
    .is_val:disabled
      -webkit-text-fill-color $color-font-hl
  .svg_wrap
    margin-left 5px
    font-size 15px
</style>
